<template>
	<view>
		<view class="header" :class="{ Active: !ifHeaderShow }">
			<view class="back" @click="GoBack"><</view>
			<view class="title">{{ lastNavData.title }}</view>
		</view>
			<uni-popup ref="popup" type="message" class="tip"><uni-popup-message :type="messageType" :message="messageText" :duration="2000" class="message"></uni-popup-message></uni-popup>
			<uni-popup ref="popupdia" type="dialog">
			    <uni-popup-dialog type="error" mode="base" title="是否删除" content="这可不能后悔" :duration="0" :before-close="true" @close="close" @confirm="confirm"></uni-popup-dialog>
			</uni-popup>
		<view class="contain" :style="{'height':ViewH+'px'}" @scroll="scroll">
			<view class="outBox">
				<view class="Box" :style="{'height':ViewH+'px'}">
					<view class="blogBG"></view>
					<view class="titleBox">
						<text class="title">{{ lastNavData.title }}</text>
					</view>
				</view>
				<view class="mainBlog">
					<view class="text">
						<text v-html="lastNavData.text">{{ lastNavData.text }}</text>
					</view>
					<view class="remark" v-if="this.allRemarkList.length">
						<remarkItem ref="remark" v-for="(item, index) in allRemarkList" :key="item.id"
						:id=item.id :goodNum=item.goodNum :content="item.content" :avatar="item.avatar"
						:time="item.time" :realname="item.realname" :username="item.username" :blogId="id"
						@startDelRemark="startDelRemark" @startAddRecomment="startAddRecomment"></remarkItem>
					</view>
					<view class="noRemark" style="color: #fff; padding-bottom: 50px;" v-if="!this.allRemarkList.length">当前没有评论...好冷清，┭┮﹏┭┮</view>
				</view>
			</view>
		</view>
		<view class="inputBox">
			<input type="text" id="remark" v-model="addRemark" 
			adjust-position="false" :placeholder="clickRemarkRealname" 
			:focus="ifFocus" :disabled="!loginA" 
			@confirm="toaddRemark" @blur="blur"/>
			<view id="goodNum" @click="addGoodNum">
				<i class="iconfont icondianzan"></i>
				{{ goodNum }}
			</view>
			<view class="remarkNum">
				<i class="iconfont iconpinglun"></i>
				{{ allRemarkList.length }}
			</view>
		</view>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue';
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue';
	import animate from "../../animate.js"
import text from '../../glob.js';
import remarkItem from './remarkItem.vue';
export default {
	components: {
		remarkItem,
		uniPopup,
		uniPopupMessage,
		uniPopupDialog
	},
	data() {
		return {
			ifFocus:false,
			ifrecomment:false,
			ifDelRecomment:false,
			ViewH:0,
			messageText:"添加成功",
			messageType:"success",
			flag:true,
			lastNavData: {},
			remarkInfo:{},
			clickRemarkRealname:"请输入评论...",//点击remark的评论消息
			test: '',
			Top: 0,
			ifHeaderShow: true,
			goodNum: 0,
			id: 0,
			allRemarkList: [],
			hasContent: false,
			addRemark:"",
			clickRemarkid:0,
			recommentInfo:{}
		};
	},
	
	created() {
		this.getAllRemark();
		this.lastNavData = text.text;
		uni.$on("startDelRecomment",msg=>{
			this.recommentInfo = msg
			this.clickRemarkid = msg.remarkId
			this.ifDelRecomment = true
			this.openDia()
		})
		uni.$on("startAddRecomment",msg=>{
			this.clickRemarkRealname = '@'+msg.realname
			this.ifFocus = true
			this.ifrecomment = true
			this.clickRemarkid = msg.remarkId
		})
	},
	 mixins: [animate.mixin],
	computed: {
		loginA(){
			return uni.getStorageSync("LoginToken")?true:false
		},
		imageFromWay() {
			switch (this.lastNavData.way) {
				case 'js':
					return '../../static/img/js.jpg';
					break;
				case 'vue':
					return '../../static/img/vue.jpg';
					break;
				case 'node':
					return '../../static/img/node.jpg';
					break;
				case 'css':
					return '../../static/img/css.jpg';
					break;
				case '随笔':
					return '../../static/img/suibi.jpg';
					break;
				case '其他':
					return '../../static/img/learn.jpg';
					break;
			}
		}
	},
	onShow() {
		let view = uni.createSelectorQuery().selectViewport()
		view.fields({
			size:true
		},data=>{
			this.ViewH= data.height
		}).exec()
	},
	onLoad(res) {
		console.log(res);
		this.goodNum = res.goodNum;
		this.id = res.id;
	},
	methods: {
		blur(){
			this.ifFocus = false
			this.ifrecomment = false
			this.clickRemarkRealname = "请输入评论..."
		},
		startAddRecomment(val){
			this.clickRemarkRealname = "@"+val.realname
			this.clickRemarkid=val.id
			this.ifFocus = true
			this.ifrecomment = true
		},
		startDelRemark(remarkInfo){
			this.remarkInfo = remarkInfo
			this.openDia()
		},
		open(){
		   this.$refs.popup.open()
		},
		openDia(){
			this.$refs.popupdia.open()
		},
		close(done){
			done()
		},
		confirm(done){
			if(this.ifDelRecomment){
				uni.request({
					method:"POST",
					header:{
						Authorization: uni.getStorageSync('LoginToken')
					},
					url:"https://www.ttzxh.icu:443/api/recomment/del",
					data:{
						id:this.recommentInfo.id,
						username:this.user.username
					},
					success: (res) => {
						if(res.data.error===-1){
							this.open()
							this.messageText="删除成功"
							this.messageType="success"
							this.$refs.remark.forEach(item=>{
								if(item.id===this.clickRemarkid){
									item.getAllRecomment()
								}
							})
						}else{
							this.open()
							this.messageText="删除失败,再试一下吧"
							this.messageType="warn"
						}
					},
					fail: () => {
						this.open()
						this.messageText="删除失败,稍后再试仍有问题请联系我"
						this.messageType="error"
					},
					complete:()=> {
						this.ifDelRecomment = false
						done()
					}
				})
			}else{
				uni.request({
					url:"https://www.ttzxh.icu:443/api/comment/del",
					method:"post",
					header:{
						Authorization: uni.getStorageSync('LoginToken')
					},
					data:{
						id:this.remarkInfo.id,
						username:uni.getStorageSync("usernameInfo").username
					},
					success: (res) => {
						if(res.data.error===-1){
							this.open()
							this.messageText="删除成功"
							this.messageType="success"
							this.getAllRemark()
						}else{
							this.open()
							this.messageText="删除失败,再试一下吧"
							this.messageType="warn"
						}
					},
					fail: () => {
						this.open()
						this.messageText="删除失败,稍后再试仍有问题请联系我"
						this.messageType="error"
					},
					complete: () => {
						done()
					}
				})
			}
		},
		addGoodNum() {
			if (this.flag) {
				this.flag = false;
				uni.request({
					method:"post",
					url:"https://www.ttzxh.icu:443/api/blog/goodNum",
					data:{
						id: this.id,
						goodNum: parseInt(this.goodNum) + 1
					},
					success: (res) => {
						if(res.data.error===-1){
							this.goodNum = parseInt(this.goodNum) + 1;
						}else{
							//错误提示
							this.goodNum = parseInt(this.goodNum) + 1;
						}
					},
					 fail: () => {
					 	//稍后再试
						this.goodNum = parseInt(this.goodNum) + 1;
					 }
				})
			}
			setTimeout(() => {
				this.flag = true;
			}, 100000);
		},
		getAllRemark() {
			uni.request({
				url: 'https://www.ttzxh.icu:443/api/comment/search',
				data: {
					blogId: this.id
				},
				success: res => {
					console.log(res);
					if (res.data.error == -1) {
						this.hasContent = true;
						this.allRemarkList = res.data.data;
					} else {
						this.hasContent = true;
						this.allRemarkList = [];
					}
				},
				fail: () => {
					//失败回调
					this.open()
					this.messageText="出错了.稍后仍有错误请联系我"
					this.messageType="error"
				}
			});
		},
		toaddRemark() {
			if(this.flag){
				this.flag=false
				if(this.addRemark.trim()==""){
					//回调
					this.open()
					this.messageText="帅哥(美女)好好输入哦"
					this.messageType="warn"
					return 
				}else{
					if(this.ifrecomment){
						uni.request({
							url:"https://www.ttzxh.icu:443/api/recomment/add",
							method:"post",
							header:{
								Authorization: uni.getStorageSync('LoginToken')
							},
							data:{
								username:this.user.username,
								content:this.addRemark,
								blogId:this.id,
								realname:this.user.realname,
								commentId:this.clickRemarkid,
								avatar:this.user.avatar
							},
							success: (res) => {
								if(res.data.error===-1){
									this.open()
									this.messageText="添加成功"
									this.messageType="success"
									this.addRemark=""
									this.$refs.remark.forEach(item=>{
										if(item.id===this.clickRemarkid){
											item.getAllRecomment()
										}
									})
								}else{
									this.open()
									this.messageText="添加失败,再试一下"
									this.messageType="warn"
								}
							},
							fail: () => {
								this.open()
								this.messageText="添加失败,稍后再试仍有问题请联系我"
								this.messageType="error"
								this.addRemark=""
							},
							complete:()=> {
								setTimeout(()=>{
									this.flag = true
								},1000)
							}
						})
					}else{
						uni.request({
							url:"https://www.ttzxh.icu:443/api/comment/add",
							method:"post",
							header:{
								Authorization: uni.getStorageSync('LoginToken')
							},
							data:{
								username:this.user.username,
								content:this.addRemark,
								blogId:this.id,
								realname:this.user.realname,
								avatar:this.user.avatar
							},
							success:(res)=>{
								console.log(res)
								if(res.data.error===-1){
									this.open()
									this.messageText="添加成功"
									this.messageType="success"
									this.getAllRemark()
									this.addRemark=""
								}else{
									this.open()
									this.messageText="添加失败,再试一下"
									this.messageType="warn"
								}
							},
							fail:()=>{
								this.open()
								this.messageText="添加失败,稍后再试仍有问题请联系我"
								this.messageType="error"
								this.addRemark=""
							},
							complete:()=> {
								setTimeout(()=>{
									this.flag = true
								},1000)
							}
						})
					}
				}
				
			}
		},
		scroll() {
			let view = uni
				.createSelectorQuery()
				.in(this)
				.select('.outBox');
			view
				.boundingClientRect(data => {
					if (data.top < this.Top) {
						this.Top = data.top;
						this.ifHeaderShow = false;
					} else if (data.top > this.Top) {
						this.Top = data.top;
						this.ifHeaderShow = true;
					}
				})
				.exec();
		},
		GoBack() {
			uni.navigateBack();
		}
	},
	beforeDestroy() {
		uni.$off("startDelRecomment")
		uni.$off("startAddRecomment")
	}
};
</script>

<style lang="scss" scoped>
.Active {
	opacity: 0;
	top: -70px !important;
}
.header {
	z-index: 9;
	display: flex;
	width: 100%;
	height: 50px;
	background-color: transparent;
	position: fixed;
	justify-content: center;
	align-items: center;
	top: 0px;
	padding-top: 15px;
	box-shadow: 0 1px 5px 0px #000;
	transition: all 0.5s;
	.back {
		position: absolute;
		left: 0;
		color: #fff;
		font-size: 30px;
		font-weight: 100;
		line-height: 80px;
		margin-left: 25px;
		&:active {
			color: $uni-text-select-color;
		}
	}
	.backTop {
		position: absolute;
		top: 0;
		bottom: 0;
		margin: auto;
		width: 30px;
		height: 30px;
		border-radius: 50%;
		right: 25px;
		background-image: url('../../static/icon/top.png');
		color: #fff;
		background-size: cover;
		transition: all 0.3s;
		&:active {
			top: -10px;
		}
	}
	.title {
		color: #fff;
		width: 400upx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		text-align: center;
	}
}
.inputBox {
	box-sizing: border-box;
	padding: 0 15px;
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 50px;
	background-color: rgba($color: #000000, $alpha: 0.3);
	display: flex;
	justify-content: space-between;
	align-items: center;
	#remark {
		box-sizing: border-box;
		padding: 5px 15px;
		width: 65%;
		height: 30px;
		border-radius: 30px;
		background-color: #dddddd;
	}
	#goodNum {
		color: $uni-dianzan;
		transition: all .5s;
		i {
			font-size: 25px;
			margin-right: 3px;
			
		}
		&:active{
			transform: scale(1.5);
		}
	}
	.remarkNum {
		color: #fff;
		i {
			font-size: 25px;
			margin-right: 5px;
		}
	}
}
.contain {
	position: relative;
	perspective: 6;
	transform-style: preserve-3d;
	overflow-x: hidden;
	overflow-y: scroll;
	.Box {
		position: relative;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		.titleBox {
			text-align: center;
			color: #fff;
			font-size: 25px;
			font-weight: 1000;
			width: 100%;
			padding: 0 25px;
			height: 350upx;
			background-color: rgba($color: #000000, $alpha: 0.7);
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.blogBG {
			transform: translateZ(-2px) scale(1.4);
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			z-index: -1;
			background: url(../../static/img/fanghuonv1.jpg);
			background-size: 100% 100%;
		}
	}
	.mainBlog {
		background-color: rgba(0, 0, 0, 0.9);
		padding: 15px;
		border-top-left-radius: 25px;
		border-top-right-radius: 25px;
		.text {
			padding-bottom: 50px;
			overflow-y: scroll;
			position: relative;
			z-index: 9;
			font-size: 13px;
			color: #fff;
		}
		.remark {
			padding-bottom: 50px;
		}
	}
}
</style>
